<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>个人资料</title>

    <link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

    <link href="../css/personal.css" rel="stylesheet" type="text/css">
    <link href="../css/infstyle.css" rel="stylesheet" type="text/css">
    <script src="../AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    <script src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>

    <!--引入vue+axios-->
    <script src="../js/plugins/vue/dist/vue.js"></script>
    <script src="../js/plugins/axios/dist/axios.js"></script>
    <script src="../js/common.js"></script>
</head>

<body>
<div id="app">
    <!--头 -->
    <header>
        <article>
            <div class="mt-logo">
                <!--顶部导航条 -->
                <div class="am-container header">
                    <ul class="message-l">
                        <div class="topMessage">
                            <div class="menu-hd" v-if="logininfoObj">
                                欢迎【{{logininfoObj.username}}】登录成功
                                <a href="javascript:;" @click="toOut" style="color: red">点击退出</a>
                            </div>
                        </div>
                    </ul>
                    <ul class="message-r">
                        <div class="topMessage home">
                            <div class="menu-hd"><a href="#" target="_top" class="h">商城首页</a></div>
                        </div>
                        <div class="topMessage my-shangcheng">
                            <div class="menu-hd MyShangcheng"><a href="#" target="_top"><i
                                    class="am-icon-user am-icon-fw"></i>个人中心</a></div>
                        </div>
                        <div class="topMessage mini-cart">
                            <div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i
                                    class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong
                                    id="J_MiniCartNum" class="h">0</strong></a></div>
                        </div>
                        <div class="topMessage favorite">
                            <div class="menu-hd"><a href="#" target="_top"><i
                                    class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
                        </div>
                    </ul>

                    <!--悬浮搜索框-->
                    <div class="nav white" style="margin-top: 35px">
                        <div class="logoBig">
                            <li><img src="../images/logobig.png"/></li>
                        </div>

                        <div class="search-bar pr">
                            <a name="index_none_header_sysc" href="#"></a>
                            <form>
                                <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
                                       autocomplete="off">
                                <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
                            </form>
                        </div>
                    </div>

                    <div class="clear"></div>
                </div>
            </div>
        </article>
    </header>
    <div class="nav-table">
        <div class="long-title"><span class="all-goods">全部分类</span></div>
        <div class="nav-cont">
            <ul>
                <li class="index"><a href="#">首页</a></li>
                <li class="qc"><a href="#">闪购</a></li>
                <li class="qc"><a href="#">限时抢</a></li>
                <li class="qc"><a href="#">团购</a></li>
                <li class="qc last"><a href="#">大包装</a></li>
            </ul>
            <div class="nav-extra">
                <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
                <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
            </div>
        </div>
    </div>
    <b class="line"></b>
    <div class="center">
        <div class="col-main">
            <div class="main-wrap">

                <div class="user-info">
                    <!--标题 -->
                    <div class="am-cf am-padding">
                        <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人资料</strong> / <small>Personal&nbsp;information</small>
                        </div>
                    </div>
                    <hr/>

                    <!--头像 -->
                    <div class="user-infoPic">

                        <div class="filePic">
                            <input type="file" class="inputPic" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
                            <img class="am-circle am-img-thumbnail" :src="userHeadImg" alt=""/>
                        </div>

                        <p class="am-form-help">头像</p>

                        <div class="info-m">
                            <div><b>用户名：<i>{{logininfoObj.username}}</i></b></div>
                            <div class="vip">
                                <span></span><a href="#">会员专享</a>
                            </div>
                        </div>
                    </div>

                    <!--个人信息 -->
                    <div class="info-main">
                        <form class="am-form am-form-horizontal">

                            <div class="am-form-group">
                                <label for="user-name" class="am-form-label">姓名</label>
                                <div class="am-form-content">
                                    <input type="text" v-model="user.username" id="user-name" placeholder="username">

                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="user-phone" class="am-form-label">电话</label>
                                <div class="am-form-content">
                                    <input id="user-phone" v-model="user.phone" placeholder="telephonenumber" type="tel">

                                </div>
                            </div>
                            <div class="am-form-group">
                                <label for="user-email" class="am-form-label">电子邮件</label>
                                <div class="am-form-content">
                                    <input id="user-email" v-model="user.email" placeholder="Email" type="email">

                                </div>
                            </div>
                            <div class="am-form-group">
                                <label for="user-age" class="am-form-label">年龄</label>
                                <div class="am-form-content">
                                    <input type="text" id="user-age" v-model="user.age" placeholder="age">
                                </div>
                            </div>

                            <div class="am-form-group address">
                                <label for="user-address" class="am-form-label">收货地址</label>
                                <div class="am-form-content address">
                                    <a href="address.html">
                                        <p class="new-mu_l2cw" id="user-address">
                                            <span class="province">湖北</span>省
                                            <span class="city">武汉</span>市
                                            <span class="dist">洪山</span>区
                                            <span class="street">雄楚大道666号(中南财经政法大学)</span>
                                            <span class="am-icon-angle-right"></span>
                                        </p>
                                    </a>

                                </div>
                            </div>
                            <div class="am-form-group safety">
                                <label for="user-safety" class="am-form-label">账号安全</label>
                                <div class="am-form-content safety">
                                    <a href="safety.html" id="user-safety">
                                        <span class="am-icon-angle-right"></span>
                                    </a>
                                </div>
                            </div>
                            <div class="info-btn">
                                <div class="am-btn am-btn-danger" @click="handleSaveUser">保存修改</div>
                            </div>

                        </form>
                    </div>

                </div>

            </div>
            <!--底部-->
            <div class="footer">
                <div class="footer-hd">
                    <p>
                        <a href="#">恒望科技</a>
                        <b>|</b>
                        <a href="#">商城首页</a>
                        <b>|</b>
                        <a href="#">支付宝</a>
                        <b>|</b>
                        <a href="#">物流</a>
                    </p>
                </div>
                <div class="footer-bd">
                    <p>
                        <a href="#">关于恒望</a>
                        <a href="#">合作伙伴</a>
                        <a href="#">联系我们</a>
                        <a href="#">网站地图</a>
                        <em>© 2015-2025 Hengwang.com 版权所有. 更多模板 <a href="http://www.cssmoban.com/"
                                                                           target="_blank" title="模板之家">模板之家</a>
                            - Collect from <a href="http://www.cssmoban.com/" title="网页模板"
                                              target="_blank">网页模板</a></em>
                    </p>
                </div>
            </div>
        </div>

        <aside class="menu">
            <ul>
                <li class="person active">
                    <a href="index.html"><i class="am-icon-user"></i>个人中心</a>
                </li>
                <li class="person">
                    <p><i class="am-icon-newspaper-o"></i>个人资料</p>
                    <ul>
                        <li><a href="information.html">个人信息</a></li>
                        <li><a href="safety.html">安全设置</a></li>
                        <li><a href="address.html">地址管理</a></li>
                        <li><a href="cardlist.html">快捷支付</a></li>
                    </ul>
                </li>
                <li class="person">
                    <p><i class="am-icon-balance-scale"></i>我的交易</p>
                    <ul>
                        <li><a href="order.html">订单管理</a></li>
                        <li><a href="change.html">退款售后</a></li>
                        <li><a href="comment.html">评价商品</a></li>
                    </ul>
                </li>
                <li class="person">
                    <p><i class="am-icon-dollar"></i>我的资产</p>
                    <ul>
                        <li><a href="points.html">我的积分</a></li>
                        <li><a href="coupon.html">优惠券 </a></li>
                        <li><a href="bonus.html">红包</a></li>
                        <li><a href="walletlist.html">账户余额</a></li>
                        <li><a href="bill.html">账单明细</a></li>
                    </ul>
                </li>

                <li class="person">
                    <p><i class="am-icon-tags"></i>我的收藏</p>
                    <ul>
                        <li><a href="collection.html">收藏</a></li>
                        <li><a href="foot.html">足迹</a></li>
                    </ul>
                </li>

                <li class="person">
                    <p><i class="am-icon-qq"></i>在线客服</p>
                    <ul>
                        <li><a href="consultation.html">商品咨询</a></li>
                        <li><a href="suggest.html">意见反馈</a></li>

                        <li><a href="news.html">我的消息</a></li>
                    </ul>
                </li>
            </ul>

        </aside>
    </div>
</div>
</body>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            logininfoObj: {},
            userHeadImg: '',
            user: {
                logininfoId:null,
                username: '',
                phone: '',
                email: '',
            },
        },
        methods: {
            getUser(){
                this.$http.get("/user/handleUser/" + this.user.logininfoId).then(res=>{
                    this.user = res.data
                })
            },

            //修改个人信息数据
            handleSaveUser(){
                this.$http.put("/user/modifyUser",this.user).then(res=>{
                    if (res.data.success){
                        alert("个人信息修改成功");
                        localStorage.removeItem("token")
                        localStorage.removeItem("logininfo")
                        location.href = "/login.html"
                    }else {
                        alert(res.data.message)
                    }
                }).catch(res=>{
                    alert("系统错误")
                })
                console.log(this.user)
            },

            toOut() {
                localStorage.removeItem("token")
                localStorage.removeItem("logininfo")
                location.href = "/login.html"
            },
            toBuyer() {
                location.href = "/publish.html"
            },
        },
        mounted() {
            this.logininfoObj = JSON.parse(localStorage.getItem("logininfo"))
            this.userHeadImg = this.logininfoObj.userHeadImg
            this.user.logininfoId = this.logininfoObj.id
            this.getUser();
        }
    })
</script>

</html>